



<div role="main" class="container" style="width:80%;">


</div>
  <div class="container-fluid" style="margin-top:3em;">


    <div class="row-fluid">

      <div class="span13">
        <!--Body content-->






        <div class="divMainCol scrollable">
          <span title="Search for event here">  <input type="text" ng-model="searchquery" placeholder="Search here" ng-keyup="searchEvents(searchquery)"> </span> 
          <button class="btn pull-right btn-primary" ng-click="toggleOrderPotsize()">Larger pot</button>
          <button class="btn pull-right btn-primary" style="margin-right:1em" ng-click="toggleOrderRecent()">Nearer deadline</button>
    <ul scroller>

          <li ng-repeat="event in events | filter:query | orderBy:orderProp">
            <div class="mywrapper">
    
            <h2 style="font-size:18px; font-style: italic;"> {{event.event.name}}</h2>
            <div class="descriptionfont" ng-show="event.event.league==0">
              {{event.description}} 
            </div>
            <div class="descriptionfont" ng-show="event.event.league>0">
              {{event.description}} in {{event.event.league | league}}
            </div>
<div class="thumb">
    <img ng-src="{{event.event.category.name | catimgfilter}}"  tooltip="Category is {{event.event.category.name}}" style="max-width: 50%;"/>
</div>            
              <div class="oddsfont">
                  Odds:
              <div ng-repeat="owo in event.optionsWithOdds">
                    {{owo.option.name}} <span class="price">{{owo.odds}}</span><br>
                  </div>
              </div>

                          <div class="oddsfont">
                           Posted <span am-time-ago="event.eventPosted"></span><br>
                           Betting deadline <span am-time-ago="event.event.betDeadline"></span><br>
                           Event starts <span am-time-ago="event.event.eventDecidedTime"></span>
                          </div>

                                                    <div class="potfont">
                                                      <b>Pot: {{event.event.pot}}</pot>
                                                    </div>
                                              <button type="button" class="btn btn-primary" ng-click="gotoEvent(event.id)">Details</button>
                                      <div ng-show="event.betstatus=='playable'">
                                       <div class="ribbon-wrapper-green" tooltip="This means that bets have been placed"><div class="ribbon-green">Playable</div></div>
                                      </div>
                                      <div ng-show="event.betstatus=='incomplete'">
                                       <div class="ribbon-wrapper-yellow" tooltip="This means that bets have not been placed for all possible outcomes"><div class="ribbon-yellow">Incomplete</div></div>
                                      </div>
                                      </div>
        </li>            
<li>
<button class="btn  btn-primary" ng-click="loadMore()" style="width: 100%;">Load more</button>
</li>
    
        </ul>
      

</div>
</div></div>








